import React from 'react'
import Cart from './Cart'

function Title({ title }) {
  return (
    <div>
      {title}
      <hr />
    </div>
  )
}
class App1 extends React.Component {
  constructor(props) {
    super(props)
    // 调用父元素的数据初始化
    this.state = {
      name: 'zixuan',
      isTil: true,
      text: '小熊',
      goods: [
        { text: '小猫', price: 242, num: 1 },
        { text: '小鸟', price: 125, num: 2 },
        { text: '小狗', price: 178, num: 3 }
      ],
      cart: [],
      cartHistory:[]
    }

    // this.handleChange = this.handleChange.bind(this)
    // 解决this指向

    setTimeout(() => {
      this.setState({
        // 每次生成新对象，不能直接操作数据，可记录日志
        name: 'litthy',
        isTil: false
      })
    }, 0)
  }
  handleAdd() {
    this.setState({
      goods: [...this.state.goods, { text: this.state.text }],
      text: ''
    })
  }
  handleChange = e => {
    // 建议用 = 解决this指向问题
    this.setState({
      text: e.target.value
    })
  }
  resetCart(i){
    this.setState({
        cart:this.state.cartHistory[i]
    })
  }
  handleAddCart(good) {
    let cartIndex
    const cartGood = this.state.cart.find((v, i) => {
      if (good.text === v.text) {
        cartIndex = i
        return true
      }
    })
    if (cartGood) {
      let newCart = [...this.state.cart]
      newCart[cartIndex].count += 1
      this.setState({
        cart: newCart
      })
    } else {
      this.setState({
        cart: [
          ...this.state.cart,
          {
            text: good.text,
            price: good.price,
            count: 1
          }
        ]
      })
    }
    this.setState({
        cartHistory:[...this.state.cartHistory,this.state.cart]
    })
  }
  render() {
    return (
      <div>
        {this.state.isTil && <h2>我会隐藏的</h2>}
        {this.state.isTil ? <h2>我会隐藏的</h2> : null}
        {/* 以上两种写法效果一样 ↑↑↑ */}
        <span>{this.props.title}</span>
        {/* 数据传递 ↑ */}
        <p>nininini4444444444{this.state.name}</p>

        <input
          type="text"
          value={this.state.text}
          onChange={this.handleChange}
          // onChange={(e)=>this.handleChange(e)}

          // onChange={(e)=>{
          //     this.setState({
          //         text: e.target.value
          //     })
          // }}
        />
        {/* <button onClick={()=>this.handleAdd()}>添加</button> */}
        <Title title={this.props.title} />
        {/* 只可传递父组件的参数 */}
        <div>
            {this.state.cartHistory.length && <button>上一次</button>}
            {this.state.cartHistory.map((his,i)=>{
                return <button onClick={()=>this.resetCart(i)}>{i}</button>
            })}
        </div>


        <ul>
          {this.state.goods.map(good => {
            return (
              <li key={good.text}>
                <span>{good.text}</span> <span>{good.price}</span>
                <button onClick={() => this.handleAddCart(good)}>添加</button>
              </li>
            )
          })}
        </ul>

        <hr />
        <Cart data={this.state.cart} />
      </div>
    )
  }
}

export default App1
